<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>个人信息页面</title>
		<link rel="stylesheet" href="css/base.css" type="text/css">
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<link rel="stylesheet" href="css/mui.min.css" type="text/css">
		<link rel="stylesheet" href="css/app.css" type="text/css">
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="js/mui.min.js" type="text/javascript"></script>
		<script src="js/style.js" type="text/javascript"></script>
		<style>
			/*body{*/
			/*	background: #ffffff !important;*/
			/*}*/
			.basicalInfo {
				width: 95%;
				position: relative;
				margin: 20px auto;
				border-radius: 6px;
				background: #ffffff;
				/*border: #ccc solid 1px;*/
				padding:38px 5px 5px 5px;
				box-shadow: #afbec9 0px 0px 12px;
			}
			.portrat{
				width:50px;
				height:50px;
				background: #ffffff;
				left:50%;
				top:-16px;
				margin-left:-25px;
				border-radius: 50%;
				position: absolute;
				box-shadow: #CCCCCC 0px 0px 16px;
			}
			.content{
				text-align: center;
			}
			.content h3{
				font-size:18px;
				text-align: center;
			}
			.mui-ellipsis{
				line-height: 16px;
				margin-bottom: 5px;
			}
			.dieaseInfo{
				margin-bottom: 5px;
			}
			.dieaseInfo,.visitInfo{
				width:100%;
				/*margin: 0 auto;*/
				padding: 8px;
				background: #ffffff;
				border-top: #ddd solid 1px;
				border-bottom: #ddd solid 1px;

			}
			.dieaseInfo h4,.visitInfo h4{
				color:#333333;
				padding-left: 20px;
				position: relative;
				line-height: 18px;
			}


			.dieaseInfo h4:before,.visitInfo h4:before {
				content: '';
				display: block;
				position: absolute;
				width: 12px;
				height: 12px;
				left: 2px;
				top: 3px;
				border-radius: 50%;
				background: #3783d1;
				/*border: 4px solid #1a1a92;*/
			}
			.dieaseContent{
				padding: 5px;
			}
			.dieaseContent p span{
				/*padding: 5px;*/
				color:#666666;
				margin-right: 10px;
			}
			.visitInfo ul li p span{
				margin-right: 15px;
			}
		</style>
	</head>
	<body>
	<div class="wrapper" id="app">
		<div class="basicalInfo">
			<img class="portrat mui-media-object mui-pull-left" src="img/protrait.png">
			<div class="mui-media-body content">
				<h3>{{Info.realname}}</h3>
				<p class='mui-ellipsis'>
					<span style="font-size:14px;display: inline-block;">建档机构：{{Info.hospName}}</span>
				</p>
			</div>
		</div>
		<div class="dieaseInfo">
			<h4>疾病信息</h4>
			<div class="dieaseContent">
				<p class='mui-ellipsis'>
					<span>建档医生:{{Info.doctor}}</span>
				</p>
				<p class='mui-ellipsis'>
					<span>疾病类型:{{Info.diseaseName}}</span>
				</p>
				<p class='mui-ellipsis'>
					<span>性别:{{Info.sex}}</span>
					<span>出生日期:{{Info.birthday}}</span>
				</p>
				<p class='mui-ellipsis'>
					<span>联系电话:{{Info.phone}}</span>
				</p>
				<p class='mui-ellipsis'>
					<span>身高:{{Info.height}}</span>
					<span>体重:{{Info.weight}}</span>
					<span>腰围:{{Info.waist}}</span>
				</p>
				<p class='mui-ellipsis'>
					<span>身份证号:{{Info.idcard}}</span>
				</p>
				<p class='mui-ellipsis'>
					<span>地址:{{Info.homeaddress}}</span>
				</p>

				<p class='mui-ellipsis'>
					<span>备注:{{Info.reamrk}}</span>
				</p>
			</div>

		</div>
		<div class="visitInfo">
			<h4>{{type}}随访记录</h4>
			<ul class="mui-table-view" v-for="(item,key) in visitedInfo" v-if="diseasesType==4">
				<li class="mui-table-view-cell" @click="toDetail(item.id)">
					<p>
						<span class="mui-left">随访时间:{{item.accompanyTime}}</span>
						<span class="mui-badge mui-badge-primary" v-if="item.accompanyType == 1">门诊</span>
						<span class="mui-badge mui-badge-primary" v-else-if="item.accompanyType == 2">家庭</span>
						<span class="mui-badge mui-badge-primary" v-else-if="item.accompanyType == 3">电话</span>
						<span class="mui-badge mui-badge-primary" v-else-if="item.accompanyType == 4">集体</span>
					</p>
					<p>
						<span>随访医生:{{item.doctorName}}</span>
						<span class="mui-navigate-right">下次随访:{{item.nextAccompanyTime}}</span>
					</p>
					<p>
						<span v-if="item.accompanyType == 1">随访月份:首次随访</span>
						<span v-if="item.accompanyType == 2">随访月份:6个月随访</span>
						<span v-if="item.accompanyType == 3">随访月份:12个月随访</span>
						<span v-if="item.accompanyType == 4">随访月份:18个月随访</span>
						<span v-if="item.accompanyType == 5">随访月份:24个月随访</span>
						<span class="mui-navigate-right" v-if="item.hasMedical == 0">随访有无药物:无</span>
						<span class="mui-navigate-right" v-if="item.hasMedical == 1">随访有无药物:有</span>
					</p>
				</li>
			</ul>
			<ul class="mui-table-view" v-for="(item,key) in visitedInfo" v-if="diseasesType==5">
				<li class="mui-table-view-cell" @click="toLoseDetail(item.id)">
					<p>
						<span class="mui-left" style="margin-right:60px;">随访时间:{{item.answerTime}}</span>
						<span class="mui-badge mui-badge-primary mui-navigate-right" v-if="item.followUpWay == 1">门诊</span>
						<span class="mui-badge mui-badge-primary mui-navigate-right" v-else-if="item.followUpWay == 2">家庭</span>
						<span class="mui-badge mui-badge-primary mui-navigate-right" v-else-if="item.followUpWay == 3">电话</span>
						<span class="mui-badge mui-badge-primary mui-navigate-right" v-else-if="item.followUpWay == 4">集体</span>
						<span class="mui-badge mui-badge-primary mui-navigate-right" v-else>未选择</span>
					</p>
				</li>
			</ul>
		</div>
	</div>
<!--	<script src="../js/mui.min.js"></script>-->
	<script type="text/javascript" charset="utf-8">
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		var vm = new Vue({
			el:"#app",
			data:{
				url:'',
				Info:{},
				visitedInfo:[],
				diseasesType:'',
				type:''
			},
			mounted(){
				//初始化获取数据
				// 获取用药名称
				sessionStorage.getItem('diseasesType');
				this.diseasesType = sessionStorage.getItem('diseasesType');
				if(this.diseasesType == 4){
					this.type = '骨松';
					this.url ='/medical-cloud/accompany/blList';
				}else{
					this.type = '失智';
					this.url = '/medical-cloud/lose/wisdom/follow/up/list';
				}
				var url = location.search;
				// 获取idcard
				this.idcard = url.split('?')[1].split('&')[0].split('=')[1];
				this.getPatientInfo(this.idcard);
				this.getVisitInfo(this.idcard);
			},
			methods:{
				getPatientInfo:function(idcard) {
					let that = this;
					$.ajax({
						url:"/medical-cloud/pppatientbase/patientInfo",
						dataType:'json',
						type:'post',
						data:{
							idCard:idcard
						},
						success:function(data){
							if(data.code == -1){
								that.Info = data.data;
								var length = that.Info.diseaseName.length - 1;
								if(that.Info.diseaseName[length] == ','){
									that.Info.diseaseName = that.Info.diseaseName.slice(0,length);
								}
							}
						}
					})
				},
				getVisitInfo:function(idcard){
					let that = this;
					$.ajax({
						// url:"/medical-cloud/accompany/blList",,
						url:that.url,
						dataType:'json',
						type:'post',
						data:{
							idCard:idcard
						},
						success:function(data){
							that.visitedInfo = data.dataList;
							// if(data.code == -1){
							// 	that.Info = data.data;
							// 	var length = that.Info.diseaseName.length - 1;
							// 	if(that.Info.diseaseName[length] == ','){
							// 		that.Info.diseaseName = that.Info.diseaseName.slice(0,length);
							// 	}
							// }
						}
					})

				},
				toDetail:function(id){
					window.location.href = 'visitedDetail.html?id='+id ;
				},
				toLoseDetail:function(id){
					window.location.href = 'loseWisdomDetail.html?id='+id ;
				}
			}
		})

	</script>
	</body>
</html>